<template>
	<el-card shadow="hover">
		<el-form :model="detailForm" :inline="true" disabled>
			<el-form-item label="总货款" prop="all_money">
				<el-input v-model="detailForm.all_money" />
			</el-form-item>
			<el-form-item label="已提现货款" prop="apply_money">
				<el-input v-model="detailForm.apply_money" />
			</el-form-item>
			<el-form-item label="未提现货款" prop="money">
				<el-input v-model="detailForm.money" />
			</el-form-item>
		</el-form>
		<el-row :gutter="10" class="top-block mb8">
			<el-col :span="1.5" v-if="queryParams.status == 1">
				<el-button @click="onApplyWithdrawal" :disabled="detailForm.money ? false : true" type="primary" plain icon="el-icon-edit">
					申请提现
				</el-button>
			</el-col>
			<right-toolbar v-model:showSearch="showSearch" @queryTable="getList" />
		</el-row>
		<el-tabs type="border-card" @tab-click="getList" v-model="queryParams.status">
			<el-tab-pane label="全部" name="0" />
			<el-tab-pane label="未提现" name="1" />
			<el-tab-pane label="已提现" name="2" />
		</el-tabs>
		<el-table @selection-change="onSelectionChange" :data="tableList" v-loading="loading">
			<el-table-column type="selection" width="40" align="center" />
			<el-table-column label="订单付款时间" align="center">
				<template #default="scope">{{ timeDictionary(scope.row.pay_time) }}</template>
			</el-table-column>
			<el-table-column label="父订单" align="center" prop="pay_sn" />
			<el-table-column label="子订单" align="center" prop="order_sn" />
			<el-table-column label="商品信息" align="center">
				<template #default="scope">
					<div>{{ scope.row.title }}</div>
					<div>({{ scope.row.options_name }})</div>
				</template>
			</el-table-column>
			<el-table-column label="货款(￥)" align="center" prop="money" />
			<el-table-column label="结算时间" align="center">
				<template #default="scope">{{ timeDictionary(scope.row.finish_time) }}</template>
			</el-table-column>
			<el-table-column label="结算状态" align="center">
				<template #default="scope">{{ paymentGoodsStatusText(scope.row.status) }}</template>
			</el-table-column>
		</el-table>
		<pagination-component
			v-show="total > 0"
			:total="total"
			v-model:page="queryParams.pageNum"
			v-model:limit="queryParams.pageSize"
			@pagination="getList"
		/>
		<application-withdrawal-dialog ref="applicationWithdrawalRef" />
	</el-card>
</template>

<script lang="ts">
import { onMounted, reactive, ref, toRefs } from 'vue';

import ApplicationWithdrawalDialog from './dialog/ApplicationWithdrawalDialog.vue';
import { supplierMoney, supplierOrder } from '/@/api/admin1';
import { paymentGoodsStatusText, timeDictionary } from '/@/utils/dictionaryTranslation';

export default {
	name: 'financialPaymentGoodsDetail',
	components: { ApplicationWithdrawalDialog },
	setup() {
		const state = reactive({
			detailForm: {},
			queryParams: {
				status: '0',
				pageNum: 1,
				pageSize: 10,
			},
			// 非单个禁用
			single: true,
			// 非多个禁用
			multiple: true,
			showSearch: true,
			tableList: [],
			loading: false,
			total: 0,
		});

		const queryFormRef = ref(null);
		const applicationWithdrawalRef = ref(null);
		// 被选择的数据项
		let selectionInfo: Array<any> = [];

		onMounted(() => {
			getList();
		});

		/********** 点击事件(on开头) **********/
		// 申请提现
		const onApplyWithdrawal = () => {
			(applicationWithdrawalRef.value as any)?.openDialog({ order_sn: selectionInfo[0].order_sn }, () => getList());
		};
		// 选择操作项
		const onSelectionChange = (selection: any) => {
			selectionInfo = selection;
			state.single = selection.length !== 1;
			state.multiple = !selection.length;
		};

		/********** 方法事件 **********/
		const getList = () => {
			state.loading = true;
			_supplierMoney();
			_supplierOrder(state.queryParams);
		};

		/********** 网络事件 **********/
		// 供应商货款基础信息
		const _supplierMoney = () => {
			supplierMoney().then((res: any) => {
				console.log('供应商货款基础信息', res);
				state.detailForm = {
					all_money: Number(res.data.info.all_money),
					apply_money: (Number(res.data.info.apply_money) * 1000 + Number(res.data.info.bind_money) * 1000) / 1000,
					money: Number(res.data.info.money),
				};
			});
		};
		// 货款明细列表
		const _supplierOrder = (_data: object) => {
			supplierOrder(_data).then((res: any) => {
				console.log('货款明细列表', res);
				state.tableList = res.data.list;
				state.total = res.data.total;
				state.loading = false;
			});
		};

		return {
			queryFormRef,
			applicationWithdrawalRef,
			onApplyWithdrawal,
			onSelectionChange,
			getList,
			timeDictionary,
			paymentGoodsStatusText,
			...toRefs(state),
		};
	},
};
</script>

<style lang="scss" scoped></style>
